<#include "/oms/iframe/common/head_index.html" />
<!DOCTYPE html>
<html>
<head>
<title></title>
	<style>
		@media (min-width: 768px){
			.bs-glyphicons {
				margin-right: 0;
				margin-left: 0;
			}
			.bs-glyphicons {
				margin: 0 -10px 20px;
				overflow: hidden;
			}
		}
		.bs-glyphicons-list {
			padding-left: 0;
			list-style: none;
		}
		.bs-glyphicons li:hover {
			color: #fff;
			background-color: #563d7c;
		}
		@media (min-width: 768px){
			.bs-glyphicons li {
				width: 12.5%;
				font-size: 12px;
			}
		}
		.bs-glyphicons li {
			float: left;
			width: 25%;
			height: 115px;
			padding: 10px;
			font-size: 10px;
			line-height: 1.4;
			text-align: center;
			background-color: #f9f9f9;
			border: 1px solid #fff;
		}
		.bs-glyphicons .glyphicon {
			margin-top: 5px;
			margin-bottom: 10px;
			font-size: 24px;
		}
		.bs-glyphicons .glyphicon-class {
			display: block;
			text-align: center;
			word-wrap: break-word;
		}
	</style>
</head>
<body >
<div class="easyui-layout" data-options="fit:true,border:false">
	<div id="content" class="bs-glyphicons" data-options="" data-options="region:'center',fit:true,border:false" style="width: 100%;">
		<ul class="bs-glyphicons-list">
		</ul>
		<table id="table" class="table" style="width: 100%;">
		</table>
	</div>
	<div data-options="region:'south',border:false" style="height:32px;padding: 0px" >
		<ul id="pagination" class="pagination">
		</ul>
	</div>
	</div>
<#include "/oms/iframe/common/setting_index.html" />
<#include "/oms/iframe/common/bottom_index.html" />
<script type="text/javascript" src="${request.contextPath}/static/oms/iframe/plugins/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript">
    $(function() {
        var pageSize = 10;
        var totalPages = 0;
        $.ajax({
            url: '/system/config/icon/grid.action?sort=seq&order=asc&offset=' + 0 + '&limit=' + pageSize,
            type: 'get',
            async: false,
            dataType: 'json',
            success: function (data) {
                if (data.total != undefined) {
                    totalPages= Math.ceil(data.total/pageSize) ;
                    $('#pagination').jqPaginator({
                        totalPages: totalPages,
                        visiblePages: pageSize,
                        currentPage: 1,
                        first:'<li class="first"  ><a href="javascript:;">首页</a></li>',
                        prev:'<li class="prev"  ><a href="javascript:void(0);">上一页</a></li>',
                        next:'<li class="next"  ><a href="javascript:void(0);">下一页</a></li>',
                        last:'<li class="last" ><a href="javascript:void(0);">末页</a></li>',
                        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                        onPageChange: function (pageNumber, type) {
                            $.ajax({
                                url: '/system/config/icon/grid.action?sort=seq&order=asc&offset=' + pageNumber*pageSize + '&limit=' + pageSize,
                                type: 'get',
                                async: false,
                                dataType: 'json',
                                success: function (data) {
                                    if (data !=undefined && data.rows !=undefined){
                                        $(".bs-glyphicons-list").html('');
                                        var n = 10;
                                        var trStr = "";
                                        $.each(data.rows, function(i,item){
                                            trStr +='<li>'
                                            	+'<span class="'+item.clazz+'" aria-hidden="true"></span>'
                                                +'<span class="glyphicon-class">'+item.clazz+'</span>'
                                                +'</li>';
                                        });
                                        $('.bs-glyphicons-list').append(trStr);
                                    }
                                }
                            });
                        }
                    });
                }
            }
        });
    });
</script>
</body>
</html>